<!DOCTYPE html>
<!-- saved from url=(0040)https://y.qq.com/portal/mv_lib.html#t6=2 -->
<html lang="zh-cn">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta name="keywords" content="音乐,QQ音乐,在线听歌,音乐下载,音乐播放器,音乐网站,MV,巅峰榜,音乐排行榜,翻译歌曲,热门歌曲,经典老歌,无损音乐,无损曲库">
    <meta name="description"
          content="QQ音乐是腾讯公司推出的一款网络音乐服务产品，海量音乐在线试听、新歌热歌在线首发、歌词翻译、手机铃声下载、高品质无损音乐试听、海量无损曲库、正版音乐下载、空间背景音乐设置、MV观看等，是互联网音乐播放和下载的优选。">
    <meta name="mobile-agent" content="format==[html5];url=https://y.qq.com/m/index.html">
    <meta name="applicable-device" content="pc">
    <title>MV库 - QQ音乐-千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>
    <link rel="canonical" href="https://y.qq.com/portal/mv_lib.html">

    <script id="requirenode" async="" src="./js/mod.js"></script>

    <link rel="stylesheet" href="css/layout_0412.css">
    <link rel="stylesheet" href="css/mv.css">
    <!--<script type="text/javascript">
        SPD.mark(31); // CSS加载完毕
    </script>-->
    <link rel="stylesheet" type="text/css" href="css/qb-ie-remind.css">
    <!--[if lt IE 8]>
    <script src='//stdl.qq.com/stdl/qb/js/json2.js'></script><![endif]-->
    <script charset="utf-8" async="" src="js/qblog.js"></script>
    <!--lagou样式-->
    <link rel="Shortcut Icon" href="http://www.lagou.com/h/images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="style/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="style/css/external.min.css"/>
    <link rel="stylesheet" type="text/css" href="style/css/popup.css"/>
    <!--    <script type="text/javascript" src="style/js/additional-methods.js"></script>-->
    <!--[if lte IE 8]>
    <script type="text/javascript" src="style/js/excanvas.js"></script>
    <![endif]-->
    <script type="text/javascript" src="style/js/conv.js"></script>
    <style>
        @import "css/element.css";
        /*解决icon 图片不显示问题*/
        @import url("//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css");
        @font-face {
            font-family: element-icons;
            src: url(font/element-icons.woff) format("woff"),url(font/element-icons.ttf) format("truetype");
            font-weight: 400;
            font-style: normal;
        }
        /*到这*/
        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    </style>
</head>


<body class="page_mv_all os_mac">
<!-- 头部 S -->

<script>
    if (window.ActiveXObject || window.msIsStaticHTML) {
        var ie = 6;

        if (!!window.XMLHttpRequest) {
            ie = 7
        }
        ;
        if (navigator.userAgent.indexOf("MSIE 7.0") != -1) {
            ie = 7
        }
        ;
        if (navigator.userAgent.indexOf("Trident/4.0") != -1) {
            ie = 8
        }
        ;
        if (navigator.userAgent.indexOf("Trident/5.0") != -1) {
            ie = 9
        }
        ;
        if (navigator.userAgent.indexOf("Trident/6.0") != -1) {
            ie = 10
        }
        ;
        if (navigator.userAgent.indexOf("Trident/7.0") != -1 || "undefined" == typeof attachEvent) {
            ie = 11
        }
        ;
        if (ie < 8) {
            document.write("<div class=\"popup_top\"  id=\"zoom_warn\">使用更高版本的 <a href=\"http://www.google.cn/intl/zh-CN/chrome/browser/desktop/\" target=\"_blank\">Chrome</a> 或 <a href=\"https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads\" target=\"_blank\">Internet Explorer</a>，体验更精彩</div>");
        }
    }
</script>
<div class="mod_header">
    <div class="section_inner">
        <h1 class="qqmusic_title"><a href="https://y.qq.com/"><img
                srcset="//y.gtimg.cn/mediastyle/yqq/img/logo@2x.png?nowebp=1 2x" src="images/logo.png" alt="QQ音乐"
                class="qqmusic_logo"></a></h1>
        <!-- 导航 S -->
        <ul class="mod_top_nav" role="nav">
            <li class="top_nav__item">
                <a href="index.html" class="top_nav__link top_nav__link--current" title="音乐馆">音乐馆</a>
            </li>
            <li class="top_nav__item">
                <a href="personalInfo.html" class="top_nav__link" title="我的音乐">我的音乐</a>
            </li>
            <li class="top_nav__item top_nav__item--subnav">
                <a href="https://y.qq.com/download/index.html" class="top_nav__link" title="客户端" rel="noopener"
                   target="_blank">客户端</a>
                <img src="http://y.gtimg.cn/mediastyle/yqq/extra/mark_1.png" class="top_nav__mark">
                <div class="popup_data_detail client_privilege">
                    <div class="popup_data_detail__cont">
                        <p><i class="client_privilege__icon client_privilege__icon--hq"></i>HQ高品质 全员开启</p>
                        <p><i class="client_privilege__icon client_privilege__icon--dts"></i>独家音效 全面升级</p>
                        <p><i class="client_privilege__icon client_privilege__icon--skin"></i>轻盈视觉 动态皮肤</p>
                        <a href="javascript:;" class="client_privilege__btn" id="top_pop_download">下载体验</a>
                    </div>
                </div>
            </li>
            <li class="top_nav__item">
                <a href="https://y.qq.com/vip/daren_recruit/apply.html" data-stat="y_new.top.darenrecruit"
                   class="top_nav__link js_nav_click" title="音乐号" rel="noopener" target="_blank">音乐号</a>
            </li>
            <li class="top_nav__item">
                <a href="https://y.qq.com/portal/vipportal/index.html" class="top_nav__link" title="VIP" rel="noopener"
                   target="_blank">VIP</a>
            </li>
        </ul>
        <ul class="mod_top_subnav" style="">
            <li class="top_subnav__item">
                <a href="./index.html" class="top_subnav__lin">首页</a>
            </li>
            <li class="top_subnav__item">
                <a href="./sing.html" class="top_subnav__link">歌手</a>
            </li>
            <li class="top_subnav__item">
                <a href="./newMusic.html" class="top_subnav__link">新碟</a>
            </li>
            <li class="top_subnav__item">
                <a href="./rankingList.html" class="top_subnav__link">排行榜</a>
            </li>
            <li class="top_subnav__item">
                <a href="./songList.html" class="top_subnav__link">分类歌单</a>
            </li>
            <li class="top_subnav__item">
                <a href="./radio.html" class="top_subnav__link ">电台</a>
            </li>
            <li class="top_subnav__item">
                <a href="./mv.html" class="top_subnav__link top_subnav__link--current">MV</a>
            </li>
            <li class="top_subnav__item">
                <a href="./digitalAlbum.html" class="top_subnav__link">数字专辑</a>
            </li>
            <li class="top_subnav__item">
                <a href="./ticketing.html" class="top_subnav__link">票务</a>
            </li>
        </ul>
        <!-- 导航 E -->
        <div class="mod_top_search" role="search">
            <div class="mod_search_input">
                <input class="search_input__input" aria-label="请输入搜索内容" type="text" placeholder="搜索音乐、MV、歌单、用户"
                       accesskey="s">
                <button class="search_input__btn"><i class="icon_search sprite"></i><span class="icon_txt">搜索</span>
                </button>
            </div>
            <div class="js_smartbox">
                <div class="mod_search_other" style="">
                    <div class="search_hot">
                        <dl class="search_hot__list" aria-labelledy="search_hot__tit">
                            <dt class="search_hot__tit">热门搜索</dt>
                            <dd>

                                <a href="javascript:;" class="search_hot__link js_smartbox_search js_left"
                                   data-name="最好的我们">
                                    <span class="search_hot__number">1</span>
                                    <span class="search_hot__name">最好的我们</span>
                                    <span class="search_hot__listen">32.1万</span>
                                </a>

                                <a href="javascript:;" class="search_hot__link js_smartbox_search js_left"
                                   data-name="张艺兴">
                                    <span class="search_hot__number">2</span>
                                    <span class="search_hot__name">张艺兴</span>
                                    <span class="search_hot__listen">26.1万</span>
                                </a>

                                <a href="javascript:;" class="search_hot__link js_smartbox_search js_left"
                                   data-name="造乐节">
                                    <span class="search_hot__number">3</span>
                                    <span class="search_hot__name">造乐节</span>
                                    <span class="search_hot__listen">22.7万</span>
                                </a>

                                <a href="javascript:;" class="search_hot__link js_smartbox_search js_left"
                                   data-name="缘分一道桥">
                                    <span class="search_hot__number">4</span>
                                    <span class="search_hot__name">缘分一道桥</span>
                                    <span class="search_hot__listen">22.1万</span>
                                </a>

                                <a href="javascript:;" class="search_hot__link js_smartbox_search js_left"
                                   data-name="我的名字">
                                    <span class="search_hot__number">5</span>
                                    <span class="search_hot__name">我的名字</span>
                                    <span class="search_hot__listen">19.2万</span>
                                </a>

                            </dd>

                        </dl>
                    </div>

                    <div class="search_history">
                        <dl class="search_history__list">
                            <dt class="search_history__tit">搜索历史<a href="javascript:;"
                                                                   class="search_history__clear js_smartbox_delete_all"><i
                                    class="icon_history_clear"></i><span class="icon_txt">清空</span></a></dt>

                            <dd class="search_history__item">
                                <a href="javascript:;" class="search_history__link js_smartbox_search js_left"
                                   data-name="华研爱情故事集">华研爱情故事集</a>
                                <a href="javascript:;" class="search_history__delete js_smartbox_delete"
                                   data-name="华研爱情故事集" title="删除"><i class="search_history__icon_delete"></i><span
                                        class="icon_txt">删除</span></a>
                            </dd>

                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="header__opt">

            <!-- 未登录 -->
            <span class="mod_top_login">
		    <a class="top_login__link js_logined" href="https://y.qq.com/portal/profile.html#stat=y_new.top.user_pic"
               onclick="setStatCookie&amp;&amp;setStatCookie();" style="display:none;">
                        <img src="images/person_300.png" class="top_login__cover" alt="">
                    </a>
                    <a class="top_login__link js_login" data-stat="y_new.top.login" href="javascript:;">
                        登录
                    </a>

                    <a class="login__link header__link js_login" data-stat="y_new.top.login" href="javascript:;">登录</a>
                    <a class="mod_btn_green top_login__btn_vip js_openvip" data-aid="music.pc.20316.newyqqtop"
                       data-stat="music.20316.btnclick.pc" href="javascript:;">开通绿钻豪华版</a>
		    <a class="mod_btn top_login__btn_vip js_openmusic" data-aid="music.pc.20317.newyqqtop"
               data-stat="music.20317.btnclick.pc" href="javascript:;">开通付费包</a>
                </span>
            <!-- 用户信息 -->
            <div class="popup_user">
            </div>
        </div>
    </div>
</div>
<!-- 头部 E -->

<div class="mod_loading" id="before_page" style="display: none;"><i class="icon_txt">加载中</i></div>
<div class="main" style="">
    <!-- 标签筛选 -->
    <div class="mod_tag" id="mv_tags">
        <div class="tag__list js_tags_area" id = "district">
            <h3 class="tag__tit">区域</h3>

            <a href="javascript:;" data-sort="area" data-mid="-1" class="tag__item tag__item--select">全部</a>

            <a href="javascript:;" data-sort="area" data-mid="0" class="tag__item">内地</a>

            <a href="javascript:;" data-sort="area" data-mid="1" class="tag__item">港台</a>

            <a href="javascript:;" data-sort="area" data-mid="2" class="tag__item">欧美</a>

            <a href="javascript:;" data-sort="area" data-mid="4" class="tag__item">韩国</a>

            <a href="javascript:;" data-sort="area" data-mid="3" class="tag__item">日本</a>

        </div>

        <div class="tag__list js_tags_version" id="mvType">
            <h3 class="tag__tit">版本</h3>

            <a href="javascript:;" data-sort="version" data-tid="0" class="tag__item tag__item--select">全部</a>

            <a href="javascript:;" data-sort="version" data-tid="1" class="tag__item">MV</a>

            <a href="javascript:;" data-sort="version" data-tid="2" class="tag__item">现场</a>

            <a href="javascript:;" data-sort="version" data-tid="3" class="tag__item">翻唱</a>

            <a href="javascript:;" data-sort="version" data-tid="4" class="tag__item">舞蹈</a>

            <a href="javascript:;" data-sort="version" data-tid="5" class="tag__item">影视</a>

            <a href="javascript:;" data-sort="version" data-tid="6" class="tag__item">综艺</a>

            <a href="javascript:;" data-sort="version" data-tid="7" class="tag__item">儿歌</a>

        </div>
    </div>

    <div class="mod_part_detail">
        <div class="part_detail__hd">
            <h2 class="part_detail__tit js_lib_title">全部MV</h2>
            <div class="part_switch" aria-label="排列方式">
                <a href="javascript:;" class="part_switch__item part_switch__item--left part_switch__item--select"
                   data-sort="new">最新</a>
                <a href="javascript:;" class="part_switch__item part_switch__item--right" data-sort="hot">最热</a>
            </div>
        </div>
        <div class="mod_mv">
            <ul class="mv_list__list" id="mv_list"  v-for="(item, index) in mvArr" :key="mv">
                <li class="mv_list__item" :data-vid="item.mvId">
                    <div class="mv_list__item_box" style="visibility: visible;">
                        <a href="https://y.qq.com/n/yqq/mv/v/j00312e0htu.html#stat=y_new.mv_lib.mv_play"
                           onclick="setStatCookie&amp;&amp;setStatCookie();" class="mv_list__cover mod_cover js_mv"
                           data-stat="y_new.mv_lib.mv_play" :data-vid="item.mvId" :title="item.mvName"
                           hidefocus="true">
                            <img class="mv_list__pic" :src="urlDown+item.mvImage"
                                 data-original="//y.gtimg.cn/music/photo_new/T015R640x360M0000011ipLA3oNEyL.jpg?max_age=2592000"
                                 onerror="this.src=&#39;//y.gtimg.cn/mediastyle/global/img/mv_300.png?max_age=31536000&#39;;this.onerror=null;"
                                 :alt="item.mvName" style="display: block; visibility: visible;">
                            <i class="mod_cover__icon_play"></i>
                        </a>
                        <h3 class="mv_list__title"><a
                                href="https://y.qq.com/n/yqq/mv/v/j00312e0htu.html#stat=y_new.mv_lib.mv_name"
                                onclick="setStatCookie&amp;&amp;setStatCookie();" class="js_mv"
                                data-stat="y_new.mv_lib.mv_name" :data-vid="item.mvId" :title="item.mvName">{{item.mvName}}</a></h3>

                        <div class="mv_list__singer" :title="item.singer.singerName">

                            <a href="https://y.qq.com/n/yqq/singer/002npZOb2uo8ZK.html#stat=y_new.mv_lib.mv_singername"
                               onclick="setStatCookie&amp;&amp;setStatCookie();" class="js_singer"
                               data-stat="y_new.mv_lib.mv_singername" data-singermid="002npZOb2uo8ZK" :title="item.singer.singerName">
                                {{item..singer.singerName}} </a>
                        </div>
                        <div class="mv_list__info"><span class="mv_list__listen"><i
                                class="mv_list__listen_icon sprite"></i>{{item.mvClick}}</span>{{item.mvIssueTime}}
                        </div>

                    </div>
                </li>
            </ul>
        </div>
        <!--<div class="mod_page_nav js_pager"><strong class="current">1</strong>
            <a href="javascript:;" class="js_pageindex" data-index="2" hidefocus="">2</a>
            <a href="javascript:;" class="js_pageindex" data-index="3" hidefocus="">3</a>
            <a href="javascript:;" class="js_pageindex" data-index="4" hidefocus="">4</a><strong
                    class="more">...</strong>
            <a href="javascript:;" class="js_pageindex" data-index="50" hidefocus="">50</a>
            <a href="javascript:;" class="next js_pageindex" data-index="2" title="下一页"
               hidefocus=""><span>&gt;</span></a>
        </div>-->
        <div class="Pagination" style="margin-left: 770px"></div>
    </div>

</div>

<div class="footer" role="footer">
    <div class="section_inner">
        <div class="footer_info">

            <div class="footer_download">
                <h3 class="footer_tit">下载QQ音乐客户端</h3>
                <ul class="footer_download_list">
                    <li class="footer_download_list__item">
                        <a href="https://y.qq.com/download/" class="js_footer_down" data-type="pc"
                           data-stat="y_new.footer.download.pc"><i class="icon_qm_pc"><span class="icon_txt">QQ音乐</span></i>PC版</a>
                    </li>
                    <li class="footer_download_list__item">
                        <a href="https://y.qq.com/download/" class="js_footer_down" data-type="mac"
                           data-stat="y_new.footer.download.mac"><i class="icon_qm_mac"><span
                                class="icon_txt">QQ音乐</span></i>Mac版</a>
                    </li>
                    <li class="footer_download_list__item">
                        <a href="https://y.qq.com/download/" class="js_footer_down" data-type="andriod"
                           data-stat="y_new.footer.download.andriod"><i class="icon_qm_android"><span class="icon_txt">QQ音乐</span></i>Android版</a>
                    </li>
                    <li class="footer_download_list__item">
                        <a href="https://y.qq.com/download/" class="js_footer_down" data-type="iphone"
                           data-stat="y_new.footer.download.iphone"><i class="icon_qm_iphone"><span class="icon_txt">QQ音乐</span></i>iPhone版</a>
                    </li>
                </ul>
            </div>

            <div class="footer_product">
                <h3 class="footer_tit">特色产品</h3>
                <ul class="footer_product_list">
                    <li class="footer_product_list__item footer_product_list__item--pic">
                        <a href="http://kg.qq.com/?pgv_ref=qqmusic.y.topmenu" rel="noopener" target="_blank"
                           class="js_other_link" data-stat="y_new.footer.other_music.k"><i
                                class="icon_qm_kg"></i>全民K歌</a>
                    </li>
                    <li class="footer_product_list__item footer_product_list__item--pic">
                        <a href="http://y.qq.com/vip/voice_intro/index.html" rel="noopener" target="_blank"
                           class="js_other_link" data-stat="y_new.footer.other_music.supersound"><i
                                class="icon_qm_ss"></i>Super Sound</a>
                    </li>
                    <li class="footer_product_list__item footer_product_list__item--pic">
                        <a href="http://y.qq.com/y/static/down/qplay.html?pgv_ref=qqmusic.y.topmenu" rel="noopener"
                           target="_blank" class="js_other_link" data-stat="y_new.footer.other_music.qplay"><i
                                class="icon_qm_qp"></i>QPlay</a>
                    </li>
                    <li class="footer_product_list__item">
                        <a href="http://y.qq.com/y/static/down/car_introduce.html" rel="noopener" target="_blank"
                           class="js_other_link" data-stat="y_new.footer.other_music.car_play">车载互联</a>
                    </li>
                    <li class="footer_product_list__item">
                        <a href="http://y.qq.com/yanchu/?pgv_ref=qqmusic.y.topmenu" rel="noopener" target="_blank"
                           class="js_other_link" data-stat="y_new.footer.other_music.yanchu">QQ演出</a>
                    </li>
                </ul>
            </div>
            <div class="footer_group">
                <h3 class="footer_tit">TME集团官网</h3>
                <ul class="footer_group_list">
                    <li class="footer_platform_list__item">
                        <a href="https://www.tencentmusic.com/" target="_blank" class="js_other_link"
                           data-stat="y_new.footer.other_music.thetme">腾讯音乐</a>
                    </li>
                </ul>
            </div>

            <div class="footer_link">
                <h3 class="footer_tit">合作链接</h3>
                <!-- 显示全部 footer_link_list--show -->
                <ul class="footer_link_list">
                    <li class="footer_link_list__item">
                        <a href="https://y.qq.com/portal/company_detail.html?id=297" rel="noopener" target="_blank"
                           class="js_other_link" data-stat="y_new.footer.other_link">CJ ENM</a>
                    </li>
                    <li class="footer_link_list__item">
                        <a href="http://v.qq.com/" rel="noopener" target="_blank" class="js_other_link"
                           data-stat="y_new.footer.other_link">腾讯视频</a>
                    </li>
                    <li class="footer_link_list__item">
                        <a href="http://z.qzone.com/" rel="noopener" target="_blank" class="js_other_link"
                           data-stat="y_new.footer.other_link">手机QQ空间</a>
                    </li>
                    <li class="footer_link_list__item">
                        <a href="http://im.qq.com/" rel="noopener" target="_blank" class="js_other_link"
                           data-stat="y_new.footer.other_link">最新版QQ</a>
                    </li>
                    <li class="footer_link_list__item">
                        <a href="http://e.qq.com/index.shtml" rel="noopener" target="_blank" class="js_other_link"
                           data-stat="y_new.footer.other_link">腾讯社交广告</a>
                    </li>
                    <li class="footer_link_list__item">
                        <a href="http://guanjia.qq.com/" rel="noopener" target="_blank" class="js_other_link"
                           data-stat="y_new.footer.other_link">电脑管家</a>
                    </li>
                    <li class="footer_link_list__item">
                        <a href="http://browser.qq.com/" rel="noopener" target="_blank" class="js_other_link"
                           data-stat="y_new.footer.other_link">QQ浏览器</a>
                    </li>
                    <li class="footer_link_list__item">
                        <a href="http://www.weiyun.com/" rel="noopener" target="_blank" class="js_other_link"
                           data-stat="y_new.footer.other_link">腾讯微云</a>
                    </li>
                    <li class="footer_link_list__item">
                        <a href="https://cloud.tencent.com/?fromSource=gwzcw.756433.756433.756433" rel="noopener"
                           target="_blank" class="js_other_link" data-stat="y_new.footer.other_link">腾讯云</a>
                    </li>
                    <li class="footer_link_list__item">
                        <a href="http://fm.qq.com/" rel="noopener" target="_blank" class="js_other_link"
                           data-stat="y_new.footer.other_link">企鹅FM</a>
                    </li>
                    <li class="footer_link_list__item">
                        <a href="http://www.znds.com/" rel="noopener" target="_blank" class="js_other_link"
                           data-stat="y_new.footer.other_link">智能电视网</a>
                    </li>
                    <li class="footer_link_list__item">
                        <a href="http://www.dangbei.com/" rel="noopener" target="_blank" class="js_other_link"
                           data-stat="y_new.footer.other_link">当贝市场</a>
                    </li>
                    <!--li class="footer_link_list__item js_last" style="display:none;"><a href="http://fm.qq.com/" rel="noopener" target="_blank" class="js_other_link" data-stat="y_new.footer.other_link">企鹅FM</a></li>
            <li class="footer_link_list__item"><a href="javascript:;" class="js_footer_more">更多</a></li>
            <li class="footer_link_list__item footer_link_list__item--more"><a href="https://cloud.tencent.com/?fromSource=gwzcw.756433.756433.756433" rel="noopener" target="_blank" class="js_other_link" data-stat="y_new.footer.other_link">腾讯云</a></li-->
                </ul>
            </div>
            <div class="footer_platform">
                <h3 class="footer_tit">开放平台</h3>
                <ul class="footer_platform_list">
                    <li class="footer_platform_list__item">
                        <a href="http://y.tencentmusic.com/" target="_blank" class="js_other_link"
                           data-stat="y_new.footer.other_music.tme">腾讯音乐人平台</a>
                    </li>
                    <li class="footer_platform_list__item">
                        <a href="https://y.qq.com/vip/daren_recruit/apply.html" target="_blank" class="js_other_link"
                           data-stat="y_new.footer.other_music.daren_recruit">音乐号认证</a>
                    </li>
                    <!--li class="footer_platform_list__item"><a href="//y.qq.com/portal/mv/mv_upload.html" target="_blank" class="js_other_link" data-stat="y_new.footer.other_music.ugc">上传视频</a></li-->
                    <li class="footer_platform_list__item">
                        <a href="http://y.qq.com/cp/homepage.html#/home" target="_blank" class="js_other_link"
                           data-stat="y_new.footer.other_music.cp">机构入驻</a>
                    </li>

                </ul>
            </div>
        </div>
        <div class="footer_copyright">

            <p>
                <a href="http://www.tencent.com/" rel="noopener nofollow" target="_blank" title="关于腾讯">关于腾讯</a> |
                <a href="http://www.tencent.com/index_e.shtml" rel="noopener nofollow" target="_blank"
                   title="About Tencent">About Tencent</a> |
                <a href="http://www.qq.com/contract.shtml" rel="noopener nofollow" target="_blank" title="服务条款">服务条款</a>
                |
                <a href="http://y.qq.com/y/static/tips/service_tips.html" rel="noopener nofollow" target="_blank"
                   title="用户服务协议">用户服务协议</a> |
                <a href="https://y.qq.com/m/client/intro/privacy.html" rel="noopener nofollow" target="_blank"
                   title="隐私政策">隐私政策</a> |
                <a href="https://y.qq.com/vip/right_declare/index.html" rel="noopener nofollow" target="_blank"
                   title="权利声明">权利声明</a> |
                <a href="http://www.tencentmind.com/" rel="noopener nofollow" target="_blank " title="广告服务 ">广告服务</a> |
                <a href="http://hr.tencent.com/ " rel="noopener nofollow " target="_blank " title="腾讯招聘 ">腾讯招聘</a> |
                <a href="http://service.qq.com/ " rel="noopener nofollow " target="_blank " title="客服中心 ">客服中心</a> |
                <a href="http://www.qq.com/map/ " rel="noopener nofollow " target="_blank " title="网站导航 ">网站导航</a>
            </p>

            <p>Copyright © 1998 -
                <script type="text/javascript ">
                    document.write(new Date().getFullYear());
                </script>
                2019 Tencent.
                <a target="_blank " href="http://www.tencent.com/en-us/le/copyrightstatement.shtml "
                   rel="noopener nofollow " title="All Rights Reserved. ">All Rights Reserved.</a>
            </p>
            <p>腾讯公司
                <a target="_blank " href="http://www.tencent.com/zh-cn/le/copyrightstatement.shtml "
                   rel="noopener nofollow " title="版权所有 ">版权所有</a>
                <a target="_blank " href="http://www.tencent.com/law/mo_law.shtml?/law/copyright.htm "
                   rel="noopener nofollow " title="腾讯网络文化经营许可证 ">腾讯网络文化经营许可证</a>
            </p>
        </div>
    </div>
</div>

<a href="javascript:; " class="btn_bottom_feedback js_btn_feedback ">反馈</a>
<a href="javascript:; " class="btn_bottom_player sprite_before js_openplayer "><span class="icon_txt ">播放器</span></a>
<div class="popup_guide "><img src="http://imgcache.gtimg.cn/mediastyle/yqq/img/logo.png " class="popup_guide__logo "
                               alt="QQ音乐 ">
    <p class="popup_guide__txt ">千万高品质曲库尽享</p>
    <a href="javascript:; " class="popup_guide__btn js_floatLayer_download "><i
            class="popup_guide__btn_icon sprite "></i>客户端下载</a>
</div>
</body>
<script src="./js/jquery-3.2.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script>




    let pageNum = 1;
    let pageSize = 12;
    let districtId = null;
    let mvTypeId = null;
    let rank = 'new';

    $(function () {

        $("body").on("click",".Pagination>a",function () {
            pageNum = $(this).prop("title");
            getMvByCondition();
        })

        getMvByCondition();
        getMvTypeList();
        getDistrictList();

    });


    /* 获取所有mv类型 */
    function getMvTypeList() {
        $.getJSON("../mvType", function (result) {
            let content = "";
            if (result.data != null) {
                content += "<h3 class=\"tag__tit\">版本</h3>\n" +
                    "\n" +
                    "            <a href=\"javascript:;\" data-sort=\"version\" data-tid=\"-1\" class=\"tag__item tag__item--select\">全部</a>"
                $.each(result.data, function (i, obj) {
                    content += "<a href=\"javascript:;\" data-sort=\"version\" data-tid=\""+i+"\" class=\"tag__item\">"+obj.mvTypeName+"</a>";
                })
            }
            $("#mvType").html(content);
        });
    }
    function getDistrictList() {
        $.getJSON("../district", function (result) {
            let content = "";
            if (result.data != null) {
                content += "<h3 class=\"tag__tit\">区域</h3>\n" +
                    "\n" +
                    "            <a href=\"javascript:;\" data-sort=\"area\" data-did=\"-1\" class=\"tag__item tag__item--select\">全部</a>";
                $.each(result.data, function (i, obj) {
                    content += "<a href=\"javascript:;\" data-sort=\"version\" data-did=\""+i+"\" class=\"tag__item\">"+obj.districtName+"</a>";
                })
            }
            $("#district").html(content);
        });
    }

    function getMvByCondition(){

        $.ajax({
            type: "GET",
            url: "../mv",
            data:{
                pageNum:pageNum,
                pageSize:pageSize,
                districtId:districtId,
                mvTypeId:mvTypeId,
                rank:rank
            },
            dataType: "json",
            success: (result, xhr, status) => {
                let content = "";
                let pageContent = "";
                if(result.data != null){
                    $.each(result.data.list, function(i,obj){
                        content += "<li class=\"mv_list__item\" data-vid=\"j00312e0htu\">\n" +
                            "                    <div class=\"mv_list__item_box\" style=\"visibility: visible;\">\n" +
                            "                        <a href=\"./mvPlay.html?mvId="+obj.mvId+"\"\n" +
                            "                           onclick=\"setStatCookie&amp;&amp;setStatCookie();\" class=\"mv_list__cover mod_cover js_mv\"\n" +
                            "                           data-stat=\"y_new.mv_lib.mv_play\" data-vid=\"j00312e0htu\" title=\"Bikini Bottom\"\n" +
                            "                           hidefocus=\"true\">\n" +
                            "                            <img class=\"mv_list__pic\" src=\"../downloadFileFromQiniu?fileName="+obj.mvImage+"\"\n" +
                        "                                 data-original=\"//y.gtimg.cn/music/photo_new/T015R640x360M0000011ipLA3oNEyL.jpg?max_age=2592000\"\n" +
                        "                                 onerror=\"this.src=&#39;//y.gtimg.cn/mediastyle/global/img/mv_300.png?max_age=31536000&#39;;this.onerror=null;\"\n" +
                        "                                 alt=\"Bikini Bottom\" style=\"display: block; visibility: visible;\">\n" +
                        "                            <i class=\"mod_cover__icon_play\"></i>\n" +
                        "                        </a>\n" +
                        "                        <h3 class=\"mv_list__title\"><a\n" +
                        "                                href=\"https://y.qq.com/n/yqq/mv/v/j00312e0htu.html#stat=y_new.mv_lib.mv_name\"\n" +
                        "                                onclick=\"setStatCookie&amp;&amp;setStatCookie();\" class=\"js_mv\"\n" +
                        "                                data-stat=\"y_new.mv_lib.mv_name\" data-vid=\"j00312e0htu\" title=\""+obj.mvName+"\">"+obj.mvName+"\n" +
                        "                            </a></h3>\n" +
                        "\n" +
                        "                        <div class=\"mv_list__singer\" title=\""+obj.singer.singerName+"\">\n" +
                        "\n" +
                        "                            <a href=\"https://y.qq.com/n/yqq/singer/002npZOb2uo8ZK.html#stat=y_new.mv_lib.mv_singername\"\n" +
                        "                               onclick=\"setStatCookie&amp;&amp;setStatCookie();\" class=\"js_singer\"\n" +
                        "                               data-stat=\"y_new.mv_lib.mv_singername\" data-singermid=\"002npZOb2uo8ZK\" title=\"Cromo\">\n" +
                        "                                "+obj.singer.singerName+" </a>\n" +
                        "                        </div>\n" +
                        "                        <div class=\"mv_list__info\"><span class=\"mv_list__listen\"><i\n" +
                        "                                class=\"mv_list__listen_icon sprite\"></i>"+obj.mvClick+"</span>"+obj.mvIssueTime+"\n" +
                        "                        </div>\n" +
                        "\n" +
                        "                    </div>\n" +
                        "                </li>"
                    });

                    /*渲染分页开始 5页导航页*/
                    if (result.data.isFirstPage){
                        pageContent += "<span class=\"disabled\" title=\"首页\">首页 </span>";
                    }else {
                        pageContent += "<a href=\"javascript:void(0)\" title=\"1\">首页</a>";
                    }
                    if (result.data.hasPreviousPage){
                        pageContent += "<a href=\"javascript:void(0)\" title=\""+(result.data.pageNum-1)+"\">上一页</a>";
                    }else {
                        pageContent += "<span class=\"disabled\" title=\"上一页\">上一页 </span>";
                    }

                    if (result.data.pages >= result.data.navigatePages){
                        if (result.data.pageNum <=2){
                            for (var i = 1;i <= result.data.navigatePages; i++){
                                if (i == result.data.pageNum){
                                    pageContent += "<span class=\"current\" title=\""+i+"\">"+i+"</span>";
                                }else {
                                    pageContent += "<a href=\"javascript:void(0)\" title=\""+i+"\">"+i+"</a>";
                                }
                            }
                        }else if (result.data.pageNum >= result.data.pages -1){
                            for (var i = result.data.pages -4;i <=result.data.pages;i++){
                                if (i == result.data.pageNum){
                                    pageContent += "<span class=\"current\" title=\""+i+"\">"+i+"</span>";
                                }else {
                                    pageContent += "<a href=\"javascript:void(0)\" title=\""+i+"\">"+i+"</a>";
                                }
                            }

                        }else {
                            for (var i= result.data.pageNum -2;i<= result.data.pageNum+2; i++){
                                if (i == result.data.pageNum){
                                    pageContent += "<span class=\"current\" title=\""+i+"\">"+i+"</span>";
                                }else {
                                    pageContent += "<a href=\"javascript:void(0)\" title=\""+i+"\">"+i+"</a>";
                                }
                            }
                        }

                    }else {
                        var i;
                        for (i = 1; i <= result.data.pages;i++){
                            if (i == result.data.pageNum){
                                pageContent += "<span class=\"current\" title=\""+i+"\">"+i+"</span>";
                            }else {
                                pageContent += "<a href=\"javascript:void(0)\" title=\""+i+"\">"+i+"</a>";
                            }
                        }
                    }
                    if (result.data.hasNextPage){
                        pageContent +="<a href=\"javascript:void(0)\" title=\""+(result.data.pageNum + 1)+"\">下一页</a>";
                    }else {
                        pageContent +="<span class=\"disabled\" title=\"下一页\">下一页 </span>";
                    }
                    if (result.data.isLastPage){
                        pageContent += "<span class=\"disabled\" title=\"尾页\">尾页 </span>";
                    }else {
                        pageContent += "<a href=\"javascript:void(0)\" title=\""+result.data.pages+"\">尾页</a>";
                    }
                    /*渲染分页结束 5页导航页*/
                }
                $("#mv_list").html(content);
                $(".Pagination").html(pageContent);
            }
        })
    }

    $("body").on("click","#district a", function(){
        $("#district a").removeClass("tag__item--select");
        $(this).addClass("tag__item--select");
        if($(this).text() == "全部"){
            districtId = null;
        }else{
            districtId = $(this).data("did");
        }
        getMvByCondition();
    });

    $("body").on("click","#mvType a", function(){
        $("#mvType a").removeClass("tag__item--select");
        $(this).addClass("tag__item--select");
        if($(this).text() == "全部"){
            mvTypeId = null;
        }else{
            mvTypeId = $(this).data("tid");
        }
        getMvByCondition();
    });

    $("body").on("click",".part_switch a", function(){
        $(".part_switch a").removeClass("part_switch__item--select");
        $(this).addClass("part_switch__item--select");
        rank = $(this).text();
        getMvByCondition();
    });

</script>

<!--<script crossorigin="anonymous" type="text/javascript"
        src="//ryqq/js/runtime~Page.9bcd2466971a86301092.js?max_age=2592000"></script>
<script crossorigin="anonymous" type="text/javascript"
        src="//ryqq/js/vendor.chunk.63d5d2521f9ae2673fa3.js?max_age=2592000"></script>
<script crossorigin="anonymous" type="text/javascript"
        src="//ryqq/js/Page.chunk.3e739db749c5a5b9851d.js?max_age=2592000"></script>-->
</html>